<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title></title>
        <script type='text/javascript'>
            
            var CTP_WEB_FULLPATH = '../../';
        </script>
        <link href='../../css/skins/standard/ctp-common.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/validator.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/borderlayout.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/panel.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/gridlayout.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/toolbar.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/menus.css' rel='stylesheet' type='text/css'/>
        <link href="../../css/colormenu.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/messagebox.css" rel="stylesheet" type="text/css"/>
        <script type='text/javascript' src='../../js/jquery/jquery.js'>
        </script>
        <script type='text/javascript' src='../../js/jquery/jquery-migrate.js'>
        </script>
        <script type='text/javascript' src='../../js/jqueryui/jquery-ui.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/public/jsextend.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/public/ctp.core.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>
        <script type='text/javascript' src='../../js/ctp/validator/ctp.validator-rules.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/validator/ctp.validator.js'>
        </script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
        <script type='text/javascript' src='../../js/ctp/borderlayout/ctp.ui.borderlayout.js'>
        </script>
        <script type="text/javascript" src="../../js/ctp/colormenu/ctp.ui.colormenu.js">
        </script>
        <script type='text/javascript' src='../../js/ctp/borderlayout/jquery.layout.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/panel/ctp.ui.panel.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/public/jquery.bgiframe.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/gridlayout/ctp.ui.gridlayout.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/toolbar/ctp.ui.toolbar.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/menus/ctp.ui.menus.js'>
        </script>
        <script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js">
        </script>
        <script type='text/javascript' kind='variant'>
            
            var panel2;
            var showLayout;
            var toolbar2;
            var menu, cm, toolbar1, buttonsLayout, buttonsGroupbox, panel2, showLayout;
        </script>
        <script type='text/javascript' kind='event'>
        </script>
        <script type='text/javascript' kind='ui'>
            
            $(document).ready(function(){
                var button1 = new ctp.ui.button({
                    id: 'button1',
                    text: '显示菜单',
                    width: '100%',
                    onClick: function(){
                        menu.show();
                    }
                });
                var button2 = new ctp.ui.button({
                    id: 'button2',
                    text: '隐藏菜单',
                    width: '100%',
                    onClick: function(){
                        menu.hide();
                    }
                });
                var button3 = new ctp.ui.button({
                    id: 'button3',
                    text: '禁用存储',
                    width: '100%',
                    onClick: function(){
                        menu.setDisabled('save')
                    }
                });
                var button4 = new ctp.ui.button({
                    id: 'button4',
                    text: '激活存储',
                    width: '100%',
                    onClick: function(){
                        menu.setActive('save');
                    }
                });
                var button5 = new ctp.ui.button({
                    id: 'button5',
                    text: '禁用子菜单',
                    width: '100%',
                    onClick: function(){
                        menu.setDisabled('submenu');
                    }
                });
                var button6 = new ctp.ui.button({
                    id: 'button6',
                    text: '激活子菜单',
                    width: '100%',
                    onClick: function(){
                        menu.setActive('submenu');
                    }
                });
                var button7 = new ctp.ui.button({
                    id: 'button7',
                    text: '隐藏菜单项',
                    width: '100%',
                    onClick: function(){
                        menu.hideItem('hidetest');
                    }
                });
                var button8 = new ctp.ui.button({
                    id: 'button8',
                    text: '显示隐藏菜单项',
                    width: '100%',
                    onClick: function(){
                        menu.showItem('hidetest');
                    }
                });
                var button9 = new ctp.ui.button({
                    id: 'button9',
                    text: '删除菜单项',
                    width: '100%',
                    onClick: function(){
                        menu.removeItem('save');
                    }
                });
                var button10 = new ctp.ui.button({
                    id: 'button10',
                    text: '复选框1置为false',
                    width: '100%',
                    onClick: function(){
                        menu.setChecked('check', false);
                    }
                });
                var button11 = new ctp.ui.button({
                    id: 'button11',
                    text: '获得所有复选框',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: '所有复选框数量：' + menu.getCheckedByFlag().length + ',状态为选中的复选框：' + menu.getCheckedByFlag(true).length + ',状态为未选中的复选框：' + menu.getCheckedByFlag(false).length
                        });
                    }
                });
                var button12 = new ctp.ui.button({
                    id: 'button12',
                    text: '获取菜单项的值',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: '查询菜单项值:' + menu.getValue('hidetest')
                        });
                    }
                });
                var button13 = new ctp.ui.button({
                    id: 'button13',
                    text: '设置菜单项的值',
                    width: '100%',
                    onClick: function(){
                        menu.setValue('hidetest', 'changeValue');
                    }
                });
                var button14 = new ctp.ui.button({
                    id: 'button14',
                    text: '所有复选框置为选中',
                    width: '100%',
                    onClick: function(){
                        $(menu.getCheckedByFlag()).each(function(){
                            menu.setChecked($(this), true);
                        });
                    }
                });
                var button15 = new ctp.ui.button({
                    id: 'button15',
                    text: '选中单选钮2并触发事件',
                    width: '100%',
                    onClick: function(){
                        menu.triggerCheck('radio2', true);
                    }
                });
                var button16 = new ctp.ui.button({
                    id: 'button16',
                    text: '选中单选钮3不触发事件',
                    width: '100%',
                    onClick: function(){
                        menu.setChecked('radio3');
                    }
                });
                var button17 = new ctp.ui.button({
                    id: 'button17',
                    text: '添加菜单项',
                    width: '100%',
                    onClick: function(){
                        menu.addItem([{
                            text: '编辑',
                            iconCls: 'edit',
                            onClick: function(item){
                            }
                        }, {
                            text: '剪切',
                            iconCls: 'cut',
                            onClick: function(item){
                            }
                        }], "submenu");
                    }
                });
                  var button18 = new ctp.ui.button({
                    id: 'button18',
                    text: '销毁菜单项',
                    width: '100%',
                    onClick: function(){
                       menu.remove();
                    }
                });
                cm = new ctp.ui.colormenu({
                    id: 'test',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: '选取颜色为：' + cm.getColor()
                        });
                    }
                });
                menu = new ctp.ui.menus({
                    id: 'mainMenu1',
					width:'130px',
					height:'60',
                    remote: {
                        "url": 'menus_data.json'
                    },
                    //offset:false,
                    //renderTo: 'body',
                    items: [{
                        text: '存储',
                        iconCls: 'save',
                        id: 'save',
                        //disabled: true,
                        onClick: function(item){
                        }
                    }, {
                        text: '查询',
                        iconCls: 'search',
                        id: 'hidetest',
                        value: 'beforeChange',
                        onClick: function(item){
                        }
                    }, {
                        id: 'check',
                        text: '选择1',
                        checked: true,
                        value: 'test,test',
                        onClick: function(item){
                            if (item.checked) {
                                ctpMSB.alert({
                                    title: '信息提示',
                                    message: "选中该项"
                                });
                            }
                            else {
                                ctpMSB.alert({
                                    title: '信息提示',
                                    message: "取消该项"
                                });
                            }
                        }
                    }, {
						id:'color',
                        text: '颜色菜单',
                        menu: cm
                    }, {
                        text: '二级菜单测试',
                        iconCls: 'print',
                        id: 'submenu',
                        menu: {
                            items: [{
                                text: '三级菜单',
                                id: 'liux',
                                menu: {
                                
                                    items: [{
                                        text: '三级存储',
                                        iconCls: 'save',
                                        onClick: function(item){
                                        }
                                        
                                    }, '-', {
                                        text: '单选按钮1',
                                        checked: true,
                                        group: 'theme',
                                        onClick: function(item){
                                            ctpMSB.alert({
                                                title: '信息提示',
                                                message: item.text + '标志位--' + item.checked
                                            });
                                        }
                                    }, {
                                        text: '单选按钮2',
                                        checked: false,
                                        id: 'radio2',
                                        group: 'theme',
                                        onClick: function(item){
                                            ctpMSB.alert({
                                                title: '信息提示',
                                                message: item.text + '标志位--' + item.checked
                                            });
                                        }
                                    }, {
                                        text: '四级菜单',
                                        id: 'liux',
                                        menu: {
                                        
                                            items: [{
                                                text: '四级存储',
                                                iconCls: 'save',
                                                onClick: function(item){
                                                }
                                                
                                            }, '-', {
                                                text: '单选按钮3',
                                                id: 'radio3',
                                                checked: false,
                                                group: 'theme',
                                                onClick: function(item){
                                                    ctpMSB.alert({
                                                        title: '信息提示',
                                                        message: item.text + '标志位--' + item.checked
                                                    });
                                                }
                                            }, {
                                                text: '单选按钮4',
                                                checked: false,
                                                group: 'theme',
                                                onClick: function(item){
                                                    ctpMSB.alert({
                                                        title: '信息提示',
                                                        message: item.text + '标志位--' + item.checked
                                                    });
                                                }
                                            }, {
                                                text: '四級搜索',
                                                iconCls: 'search',
                                                onClick: function(item){
                                                    ctpMSB.alert({
                                                        title: '信息提示',
                                                        message: item.text
                                                    });
                                                }
                                            }]
                                        
                                        
                                        }
                                    
                                    }, {
                                        text: '三級搜索',
                                        iconCls: 'search',
                                        onClick: function(item){
                                            ctpMSB.alert({
                                                title: '信息提示',
                                                message: item.text
                                            });
                                        }
                                    }]
                                
                                
                                }
                            
                            }]
                        }
                    }]
                
                });
                toolbar2 = new ctp.ui.toolbar({
                    id: 'toolbar2',
                    leftItems: [{
                        type: 'menu',
                        id: 'menus3',
                        text: '菜单',
                        icon: 'menu',
                        object: menu
                    }]
                });
                
                showLayout = new ctp.ui.gridlayout({
                    id: 'showLayout',
                    width: '80%',
                    height: '160px',
                    cols: 1,
                    colSpace: 2,
                    items: [[{
                        element: toolbar2
                    }]]
                });
                
                buttonsLayout = new ctp.ui.gridlayout({
                    id: 'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [[{
                        element: button1
                    }, {
                        element: button2
                    }, {
                        element: button3
                    }], [{
                        element: button4
                    }, {
                        element: button5
                    }, {
                        element: button6
                    }], [{
                        element: button7
                    }, {
                        element: button8
                    }, {
                        element: button9
                    }], [{
                        element: button10
                    }, {
                        element: button11
                    }, {
                        element: button12
                    }], [{
                        element: button13
                    }, {
                        element: button14
                    }, {
                        element: button15
                    }], [{
                        element: button16
                    }, {
                        element: button17
                    },{
                        element: button18
                    }
                    
                    ]]
                
                });
                var showGroupbox = new ctp.ui.groupbox({
                    id: 'showGroupbox',
                    items: [showLayout],
                    title: '效果展示区'
                });
                buttonsGroupbox = new ctp.ui.groupbox({
                    id: 'buttonsGroupbox',
                    items: [buttonsLayout],
                    //width: '100%',
                    title: '功能测试区'
                });
                panel2 = new ctp.ui.panel({
                    id: 'panel2',
                    title: 'menus组件',
                    width: '500px',
                    height: 'auto',
                    align: 'center',
                    items: [showGroupbox, buttonsGroupbox],
                    renderTo: 'body'
                });
            });
        </script>
    </head>
    <BODY>
        <b>ctp.ui.menus实例</b>
        <hr/>
        <br/>
    </BODY>
</html>
